import React, {PureComponent} from 'react';
import {StyleSheet, View, Image, Text, TouchableWithoutFeedback, Clipboard} from 'react-native';
import NavigationService from '../../NavigationService'

export default class extends PureComponent {
    render() {
        const {setIsShowSearchPop} = this.props;
        return (
            <View style={styles.container}>
                <View style={styles.main}>
                    <Image source={require('./img/bg.png')} style={styles.img}/>
                    <View style={styles.content}>
                        <Text style={styles.text}>翡翠宝石手表女士时尚精钢金色珐琅，圆形简单大气宝石镶嵌表盘翡翠绿真皮表手表...</Text>
                    </View>
                    <View style={styles.btnWrap}>
                        <TouchableWithoutFeedback onPress={() => {
                            Clipboard.setString('');
                            setIsShowSearchPop(false);
                        }}>
                            <View style={styles.flexItem}>
                                <Text style={styles.btnText}>取消</Text>
                            </View>
                        </TouchableWithoutFeedback>
                        <TouchableWithoutFeedback onPress={() => {
                            setIsShowSearchPop(false);
                            Clipboard.setString('');
                            NavigationService.navigate('search');
                        }}>
                            <View style={styles.flexItem}>
                                <Text style={[styles.btnText, {color: '#e60904'}]}>搜索</Text>
                            </View>
                        </TouchableWithoutFeedback>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        width: '100%',
        height: '100%',
        left: 0,
        top: 0,
        backgroundColor: 'rgba(55,58,57,.3)',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 100
    },
    main: {
        width: 290,
        borderBottomLeftRadius: 4,
        borderBottomRightRadius: 4
    },
    img: {
        width: 290,
        height: 107
    },
    content: {
        padding: 30,
        backgroundColor: '#fff'
    },
    text: {
        fontSize: 13,
        color: '#3e403f',
        lineHeight: 18
    },
    btnWrap: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        backgroundColor: '#fff',
        borderBottomLeftRadius: 8,
        borderBottomRightRadius: 8
    },
    flexItem: {
        flex: 1,
        height: 50,
        alignItems: 'center',
        justifyContent: 'center'
    },
    btnText: {
        fontSize: 13,
        color: '#282727',
        textDecorationLine: 'underline'
    }
});
